<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>thislabel</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			
			body {
				background-color: white;
			}
			
			.mui-bar {
				background-color: white;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 0;
			}
			
			.mui-table-view-cell:after {
				left: 15px;
				right: 5px;
			    height: 1px;
			}
			
			/*list下划线*/
			/*.mui-table-view:after {
				height: 0px;
			}*/
			
			/*下划线*/
			.mui-table-view-cell:last-child:after {
				height: 1px;
			}
			
			/*添加标签的div*/
			
			#menu-wrapper {
				position: relative;
				/*top: 48px;
				left: 0;
				right: 0;*/
				z-index: 999;
				text-align: center;
				background-color: white;
				width: 100%;
				margin-top: 17px;
				padding: 5px 5px 0 15px;
			}
			
			#menu-wrapper #bottom {
				border-bottom: 1px solid #007AFF;
			}
			/*添加按钮*/
			
			#save {
				border: none;
				background-color: #609FFC;
				color: #FFFFFF;
				font-size: 13px;
				border-radius: 0;
				width: 60px;
			}
			
			a {
				color: black;
			}
			
			.mui-bar .atext {
				font-size: 16px;
				padding-top: 15px;
			}
			/*列表*/
			
			.mui-table h4,
			.mui-table h5,
			.mui-table .mui-h5,
			.mui-table .mui-h6,
			.mui-table p {
				margin-top: 0;
				color: black;
			}
			
			.mui-h6 {
				font-size: 16px;
				font-weight: 400;
			}
			
			.mui-table h4 {
				line-height: 21px;
				font-weight: 500;
			}
			
			.mui-table .oa-icon {
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			.mui-table .oa-icon-star-filled {
				color: #f14e41;
			}
			/*复选框*/
			
			.mui-checkbox.mui-left input[type=checkbox] {
				left: 4px;
			}
			
			.mui-checkbox input[type=checkbox] {
				position: absolute;
				top: 9px;
				right: 20px;
				display: inline-block;
				width: 28px;
				height: 26px;
				border: 0;
				outline: 0!important;
				background-color: transparent;
				-webkit-appearance: none;
			}
			
			.mui-checkbox input[type=checkbox]:before {
				content: '\e413';
			}
			
			.mui-checkbox input[type=checkbox]:checked:before {
				content: '\e443';
			}
			
			.mui-checkbox input[type=checkbox]:before {
				font-family: Muiicons;
				font-size: 16px;
				font-weight: 400;
				line-height: 1;
				text-decoration: none;
				border-radius: 0;
				background: 0 0;
				-webkit-font-smoothing: antialiased;
				top: 8px;
			}
			
			.mui-checkbox.mui-left label {
				padding-left: 30px;
				font-size: 14px;
			}
			/*复选框的关联ui*/
			
			.clearfix:after {
				/*伪元素是行内元素 正常浏览器清除浮动方法*/
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			#tag-ui {
				position: relative;
				list-style: none;
				display: none;
			}
			
			.tag-li {
				float: left;
				background-color: #f2f3f4;
				padding: 0 20px 0 5px;
				margin-left: 10px;
				border-radius: 5px;
				height: 26px;
				line-height: 26px;
				max-width: 60px;
				text-align: center;
				flex-shrink: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				left: -45px;
				font-size: 12px;
			}
			
			.mui-icon-closeempty:before {
				position: absolute;
				top: 1px;
				right: -2px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-back"></a>
			<h1 class="mui-title">我的标签</h1>
		</header>

		<div class="mui-content">
			<div id="menu-wrapper" class="clearfix">
				<div id="">
					<!--<li class="tag-li">
				            <span class="tag-name">aaadddd</span>
				            <span class="tag-delete"></span>
	        			</li>-->
					<ul id="tag-ui">

					</ul>
				</div>

				<div id="bottom">
					<input style="width: 75%;border: none;height:32px;font-size:13px;" placeholder="请输入新的标签名称：" id="laber" />
					<button id="save">添加</button>
				</div>
			</div>
			<div>
				<form name="form1" method="post" action="#">
					<ul class="mui-table-view " id="checkboxs">
					</ul>
				</form>

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: true //启用右滑关闭功能
				
//				//返回父页面刷新
//				beforeback: function() {　　　　
//					var list = plus.webview.currentWebview().opener();　　　　
//					//refresh是父页面自定义事件
//					mui.fire(list, 'refresh');
//					//返回true,继续页面关闭逻辑
//					return true;
//				}
			});
			
			var d = null;
			var token = null;
			var noteId = null;
			var checkboxList = [];
			var myUrl1 = null;
			 
			mui.plusReady(function(){
				
				mui.init({
				//返回父页面刷新
				beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
					//refresh是父页面自定义事件
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});
				
				
				
				var self = plus.webview.currentWebview();
				token = plus.storage.getItem('accessToken');
				myUrl1=plus.storage.getItem("myUrl1");
//				console.log(self.noteId);
				noteId = self.noteId;
				
				labelajax();
			})

			

			function labelajax(){
				mui.ajax(myUrl1+'/note-label/label/mylabelList?token='+token, {
//				mui.ajax('http://localhost:9099/label/mylabelList?token=16770fcf70e6412285900e5570f1b126', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						d = data;
						console.log(data);
						$("#checkboxs").empty();
						for(i = 0; i < data.length; i++) {
							var labels = data[i];
							$("#checkboxs").append('<li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10">'
							+'<div class="mui-input-row mui-checkbox mui-left"><label>'+ labels.labelName +'</label>'
							+'<input name="checkbox" value="'+labels.labelName+','+labels.id+'" type="checkbox" onClick="result(this.form)"></div></div></div></li>');
						}
						checkouts();
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(errorThrown); 
					}
				});
				
			}
			
			function checkouts(){
				mui.ajax(myUrl1+'/note-label/label/thislabelList?token='+token, {
//				mui.ajax('http://localhost:9099/label/thislabelList?token=16770fcf70e6412285900e5570f1b126', {
					data: JSON.stringify(noteId),		//笔记id	
//					data: JSON.stringify("9b45119af2e24a4595ae32c16587f701"),
					dataType: 'json', 
					type: 'post', 
					timeout: 10000, 
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						
						console.log(data);
						$('#tag-ui').empty();
						for(i = 0; i < data.length; i++) {
							$("input[type='checkbox']").each(function(e) {
								var str = $(this).val().split(",");
								if( str[1]  == data[i].id ) {
									checkboxList.push(str[1]);
									$(this).prop("checked", true);
									$('#tag-ui').show();
									$('#tag-ui').append('<li class="tag-li" ><span class="tag-name">' + str[0] +
										'</span><span class="tag-delete mui-icon mui-icon-closeempty" data=' + str[1] + ' ></span></li>');
								}
							})
						}
					}
				});
			}
			
//			labelajax();
			

			function result(form) {
				var ui = document.getElementById("tag-ui");
				var str1 = [];
				$('#tag-ui').empty();          
				for(var i = 0; i < form.elements.length; i++) {              
					var e = form.elements[i];  
					var str = e.value.split(",");             
					if(e.name == "checkbox" && e.checked == true) {
						str1.push(str[1]);
//						console.log(str[0] + " " + str[1]);                 
						$('#tag-ui').show();
						$('#tag-ui').append('<li class="tag-li" ><span class="tag-name">' + str[0] +
							'</span><span class="tag-delete mui-icon mui-icon-closeempty" data=' + str[1] + ' ></span></li>');             
					}     
				}
//				console.log(checkboxList);
//				console.log(str1);
				
				//得到两个数组不同的元素
				function getArrDifference(arr1, arr2) {
				    return arr1.concat(arr2).filter(function(v, i, arr) {
				        return arr.indexOf(v) === arr.lastIndexOf(v);
				    }); 
				}
				
				var r;
				var labelid;
				if (checkboxList.length < str1.length) {
					r = "1";
					
				};
				if (checkboxList.length > str1.length) {
					r = "0";
				};
				console.log(getArrDifference(checkboxList,str1));
				labelid = getArrDifference(checkboxList,str1);
				var label = {
					"id": labelid+"",
					"labelName": r,
					"userId": token,
					"notesId": noteId
				};
				mui.ajax(myUrl1+'/note-label/label/updateThisLabel?token='+token, {
					data: JSON.stringify(label),
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					headers: {
						'Content-Type': 'application/json'
					},
					success: function() {
						console.log(true); 
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(errorThrown); 
					}
				});
				
			}

			$(document).ready(function() {

				$('#tag-ui').on('click', '.tag-delete', function() {
					var label = {
						"id": $(this).attr('data'),
						"labelName": "",
						"userId": "",
						"notesId": noteId
					};
					mui.ajax(myUrl1+'/note-label/label/delThisLabel?token='+token, {
						data: JSON.stringify(label),
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						headers: {
							'Content-Type': 'application/json'
						},
						success: function() {
							labelajax();
						}
					});
					
				});
				
				$("#save").click(function() {
					var name = $("#laber").val();
					var label = {
						"id": "",
						"labelName": name,
						"userId": token,
						"notesId": noteId
					};
					
					if (name == "") {
						mui.toast('标签名不能为空',{ duration:'short', type:'div' }) 
					} else{
						var r = false;
						for(i = 0; i < d.length; i++) {
							var n = d[i].labelName;
							if(name == n){
								r = true;
							}
						}
						if (r) {
							mui.toast('该标签已存在',{ duration:'short', type:'div' }) 
						} else{
							mui.ajax(myUrl1+'/note-label/label/addThisLabel?token='+token, {
								data: JSON.stringify(label),
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function() {
									labelajax();
									$("#laber").val("");
								}
							});
						}
					}
				})
				
			});
		</script>
	</body>

</html>